<script setup lang="ts">
import type { TablePageProps } from '../types/comp';

import { onMounted, toRef, useSlots } from 'vue';

import { Table } from 'ant-design-vue';

import Filter from './filter.vue';

const props = defineProps<TablePageProps>();

const filterModel = defineModel('filter');

const slots = useSlots();

const slotKeys = Object.keys(slots);

const refProps = toRef(props);

const { col, list } = refProps.value.filterProps;

if (refProps.value.tableProps.pagination) {
  refProps.value.tableProps.pagination.hideOnSinglePage = true;
} else {
  refProps.value.tableProps.pagination = {
    hideOnSinglePage: true,
  };
}

onMounted(() => {
  document.title = props.title as string;
});
</script>
<template>
  <div class="view">
    <!-- {{ title }} -->
    <div class="view-filter">
      <Filter v-model="filterModel" :col="col" :list="list">
        <template v-for="slot in slotKeys" :key="slot" #[slot]>
          <slot :name="slot" />
        </template>
      </Filter>
    </div>
    <div class="view-handle">
      <slot name="handle" />
    </div>
    <div class="view-table">
      <Table v-bind="refProps.tableProps" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.view {
  &-filter {
    padding-bottom: 16px;
  }
  &-handle {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 16px;
  }
  &-table {
  }
}
</style>
